<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="./libs/jquery-2.0.3.min.js"></script>
        <script src="./libs/jquery.cookie.js"></script>
        <script src="./libs/jquery.mobile-1.4.0/jquery.mobile-1.4.0.js"></script>
        <script src="./libs/knockout-3.0.0.debug.js"></script>
        <script src="./libs/underscore.js"></script>
        <script src="./libs/backbone.js"></script>

        <script src="./js/app/DataRepository.js"></script>
        <script src="./js/app/MainVm.js"></script>
        <script src="./js/app/SiteVm.js"></script>
        <script src="./js/app/SectionVm.js"></script>

        <link href="./libs/jquery.mobile-1.4.0/jquery.mobile-1.4.0.min.css" rel="stylesheet">
        <link href="./libs/jquery.mobile-1.4.0/jquery.mobile.structure-1.4.0.min.css" rel="stylesheet">
        <link href="./libs/jquery.mobile-1.4.0/jquery.mobile.theme-1.4.0.min.css" rel="stylesheet">
    </head>
    <body>

        <div data-role="page" id="sites">
            <div data-role="header">
                <h1 data-bind="text: title"></h1>
            </div>
            <div data-role="content">
                <ul data-role="listview" data-bind="foreach: Sites">
                    <li><a data-bind="text: title, click: $parent.chooseSite"></a></li>
                </ul>
            </div>
        </div>

        <div data-role="page" id="urls" data-bind="if: currentSite()">
            <div data-role="header">
                <a href="#" data-icon="back" data-rel="back">Назад</a>
                <h1 data-bind="text: currentSite().title"></h1>
            </div>
            <div data-role="content">
                <ul data-role="listview" data-bind="foreach: currentSite().Sections()">
                    <li><a data-bind="text: title"></a></li>
                </ul>
            </div>

        </div>

        <script>
            $(function() {
                var dispatcher = _.clone(Backbone.Events);
                var data_rep = new DataRepository(dispatcher);
                var vm = new MainVm(dispatcher);

                ko.applyBindings(vm);

                data_rep.loadSites();

                $('body').on("pagebeforeshow", function( event ) {
                    console.log('pagebeforeshow');
                    $(event.target).find('ul').listview('refresh');
                });

                $('body').on("pagechange", function( event ) {
                    console.log('pagechange');

                });

                $('body').on("pagecreate", function( event ) {
                    console.log();

                });

                $( window ).on( "navigate", function( event, data ) {
                    console.log( "navigate" );
                });

            });
        </script>
    </body>
</html>
